<nav class="navbar navbar-default">

    <div class="navbar-global theme-default">
        <div class="container">
            <div class="navbar-header">
                <a href="http://www.microsoft.com" class="navbar-brand">
                    <img src="https://assets.onestore.ms/cdnfiles/onestorerolling-1511-11008/shell/v3/images/logo/microsoft.png" alt="Microsoft" height="23" />
                </a>
            </div>
        </div>
    </div>


    <div class="navbar-local color-accent theme-dark">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                    <span class="sr-only">Toggle navigation</span>
                    <i class="glyph glyph-hamburger"></i>
                </button>

                <a href="index.html" class="navbar-brand">
                    <img src="images/winstrap_white.svg" alt="Winstrap" height="29" />
                </a>

            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="colors.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Colors<i class="glyph glyph-chevron-down-2"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="colors.html">All colors</a></li>
                            <li class="divider"></li>
                            <li><a href="colors.html#bootstrap-colors">Bootstrap colors</a></li>
                            <li><a href="colors.html#mdl-colors">MDL colors</a></li>
                            <li><a href="colors.html#mdl-alt-colors">MDL alt colors</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="typography.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Typography<i class="glyph glyph-chevron-down-2"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="typography.html">All typography</a></li>
                            <li class="divider"></li>
                            <li><a href="typography.html#fonts">Fonts</a></li>
                            <li><a href="typography.html#sizes">Sizes</a></li>
                            <li><a href="typography.html#headings">Headings</a></li>
                            <li><a href="typography.html#subheadings">Subheadings</a></li>
                            <li><a href="typography.html#paragraphs">Paragraphs</a></li>
                            <li><a href="typography.html#captions">Captions</a></li>
                            <li><a href="typography.html#glyphs">Glyphs</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="layout.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Layout<i class="glyph glyph-chevron-down-2"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="layout.html">All layout</a></li>
                            <li class="divider"></li>
                            <li><a href="layout.html#page-header">Page header</a></li>
                            <li><a href="layout.html#grid">Grid</a></li>
                            <li><a href="layout.html#grid-small-gutters">Small gutters</a></li>
                            <li><a href="layout.html#spacers">Spacers</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="controls.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Controls<i class="glyph glyph-chevron-down-2"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="controls.html">All controls</a></li>
                            <li class="divider"></li>
                            <li><a href="controls.html#buttons">Buttons</a></li>
                            <li><a href="controls.html#toggle-switch">Toggle Switch</a></li>
                            <li><a href="controls.html#forms">Forms</a></li>
                            <li><a href="controls.html#progress">Progress bar</a></li>
                            <li><a href="controls.html#loader">Progress ring</a></li>
                            <li><a href="controls.html#dropdown">Dropdown</a></li>
                            <li><a href="controls.html#tooltips">Tooltips</a></li>
                            <li><a href="controls.html#flyouts">Flyouts</a></li>
                            <li><a href="controls.html#dialogs">Dialogs</a></li>
                            <li><a href="controls.html#tabs">Tabs</a></li>
                            <li><a href="controls.html#navs">Navbar</a></li>
                            <li><a href="controls.html#side-nav">Side navigation</a></li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="components.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Components<i class="glyph glyph-chevron-down-2"></i></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="components.html">All components</a></li>
                            <li class="divider"></li>
                            <li><a href="components.html#breadcrumb">Breadcrumb</a></li>
                            <li><a href="components.html#back-to-top">Back to top</a></li>
                            <li><a href="components.html#rating">Rating</a></li>
                            <li><a href="components.html#labels">Labels</a></li>
                            <li><a href="components.html#media">Media</a></li>
                            <li><a href="components.html#tables">Tables</a></li>
                            <li><a href="components.html#responsive-table">Responsive table</a></li>
                            <li><a href="components.html#list-items">List items</a></li>
                            <li><a href="components.html#pagination">Pagination</a></li>
                            <li><a href="components.html#tiles">Tiles</a></li>
                            <li><a href="components.html#jumbotron">Jumbotron</a></li>
                            <li><a href="alerts.html">Alerts</a></li>
                        </ul>
                    </li>

                    <li>
                        <a class="color-type-secondary" href="#changelog" data-toggle="modal">Changelog</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</nav>
